/*父容器的大小也会影响内部子元素的浮动效果*/
.parent_container {
    position: relative;
    top: 0;
    left: 0;
    height: 100px;
    width: 800px;
    background-color: #ff00cc;
}

/*margin是指元素的在边框之外添加边距，是4个方向都添加margin的距离*/
.child_container {
    margin: 5px;
    background-color: aquamarine;
    height: 50px;
    width: 50px;
    float: left;
}

/*测试浮动效果*/
.child_container_v2 {
    margin: 5px;
    background-color: aquamarine;
    height: 50px;
    width: 50px;
    float: left;
}

/*测试居中效果
 * top: 50%;left: 50%; 用于定位子元素的左上角
 * transform: translate(-50%, -50%); 用于定位子元素的中心，-50% 表示将元素向左和向上移动其自身宽度和高度的50%。
 */
.child_container_v3 {
    position: absolute;
    background-color: #8cff00;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    width: 50px;
}

/* z-index用于控制元素的层级*/
/*position: relative 则是让元素尽可能避免重叠*/
/*justify-content用于控制容器内部元素的水平位置，align-items控制垂直位置，它们只在display为flex时生效*/
/*text-align用于控制文本的位置*/
.parent_container_v2 {
    position: relative;
    background-color: antiquewhite;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*top: 0;将元素的上边缘定位在包含块的顶部，left: 0;将元素放在最左边*/
.parent_container_v3 {
    position: relative;
    background-color: #bd7514;
    width: 100%;
    height: 100px;
    top: 10px;
    left: 0;
    display: flex;
    justify-content: center;
}

.pv3_s1 {
    background-color: #8cff00;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 20px;
}

/*这里的top元素是指和父元素的下边缘保持多长距离，如果上面有个元素和自己的父元素的top是0，那么自己就和上面的元素的下边缘保持top的距离就行*/
.parent_container_v4 {
    position: relative;
    background-color: #bd1447;
    width: 100%;
    height: 100px;
    margin-top: 80px;
    margin-bottom: 10px;
    top: 0;
    left: 20px;
    display: flex;
}

/*display: flex;
    justify-content: center;
    align-items: center; 通过这3个属性也可以实现居中对齐*/
.parent_container_v5 {
    position: relative;
    background-color: #b620cd;
    width: 100%;
    height: 100px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pv5_s1 {
    background-color: #8cff00;
    width: 50px;
    height: 50px;
}

/*color: white;用于设置块中元素的颜色*/
.parent_container_v6 {
    position: relative;
    top: 40px;
    margin-top: 40px;
    background-color: blue;
    height: 100px;
    width: 100px;
    border: 5px solid #e60a0a;
    padding-left: 100px; /*内边距会增加元素的宽度和高度，也会上色*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-left: 20px; /*左侧外边距为20px*/
}

/*经过测试发现right: 0;
    bottom: 0; 这些属性确实很适合元素的具体定位（需要设置position: absolute才有效,
    当position为relative时，这些属性的作用和margin-bottom等属性的作用差不多，主要是用来控制间距），
    而margin-bottom则侧重于元素之间的间距*/
.parent_container_v7 {
    position: absolute;
    background-color: #4f4fd6;
    height: 100px;
    width: 100px;
    border: 5px solid #e60a0a;
    display: flex;
    color: white;
    right: 0;
    bottom: 0;
}

/*top: 0;
    right: 0;只有在position为absolute时才是真正相对于父元素，如果是relative的话, 也有用，只不过只有top和left有用，
    bottom和right只是在position为absolute时才有效，因为relative定位是指相对于正常文档流的偏离，而absolute则是脱离
    文档流的偏离*/
.pv7_s1 {
    position: relative;
    background-color: #8cff00;
    /*position: absolute;*/
    width: 50px;
    height: 50px;
    top: 20px;
    left: 20px;
    /*bottom: 0;*/
    /*right: 0;*/
}

body {
    margin: 0;
}

